<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" th:href="@{/static/lib/layui-v2.8.3/layui/css/layui.css}" media="all">
  <link rel="stylesheet" th:href="@{/static/index/css/public.css}" media="all">
  <style>
    body {
      background-color: #ffffff;
    }
    /*.image-container {*/
    /*  position: relative;*/
    /*  display: inline-block;*/
    /*}*/

    /*.close-button {*/
    /*  position: absolute;*/
    /*  top: 5px;*/
    /*  right: 5px;*/
    /*  background-color: red;*/
    /*  color: white;*/
    /*  font-size: 12px;*/
    /*  padding: 0px 4px;*/
    /*  cursor: pointer;*/
    /*}*/
  </style>
</head>
<body>
<div class="layui-form layuimini-form">
  <input type="hidden" name="id" th:value="${room.id}">
  <div class="layui-form-item">
    <label class="layui-form-label required">房间类型</label>
    <div class="layui-input-block">
<!--      th:value="${room.type}",是指修改时的原有的信息-->
      <input type="text" name="type" lay-verify="required|type" lay-reqtext="房间类型不能为空" placeholder="请输入房间类型" th:value="${room.type}" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label required">价格</label>
    <div class="layui-input-block">
      <input type="text" name="price" lay-verify="required|price" lay-reqtext="价格不能为空" placeholder="请输入价格" th:value="${room.price}" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label required">介绍</label>
    <div class="layui-input-block">
      <textarea placeholder="请输入内容" name="description" lay-verify="required" class="layui-textarea" th:text="${room.description}">
      </textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label required">图片</label>
    <div class="layui-input-block">
      <div class="layui-upload-drag" style="display: block;" id="ID-upload-demo-drag">
        <i class="layui-icon layui-icon-upload"></i>
        <div>点击上传，或将文件拖拽到此处</div>
      </div>
      <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;">
        预览图：
        <div class="layui-upload-list" id="upload-demo-preview"></div>
      </blockquote>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-input-block">
      <button id="upload-btn" class="layui-btn layui-btn-normal  layui-hide">提交</button>
      <button class="layui-btn layui-btn-normal" id="form-submit"  lay-submit lay-filter="saveBtn">确认保存</button>
    </div>
  </div>
</div>
<script>
  let ctx = '[[${#httpServletRequest.getContextPath()}]]';
</script>
<script th:src="@{/static/lib/juqery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script th:src="@{/static/lib/layui-v2.8.3/layui/layui.js}" charset="utf-8"></script>
<script>
  layui.use(['form'], function () {
    var form = layui.form,
            layer = layui.layer,
             upload = layui.upload,
            $ = layui.$;

    // 自定义验证规则，如下以验证用户名和密码为例
    form.verify({
      // 函数写法
      // 参数 value 为表单的值；参数 item 为表单的 DOM 对象
      type: function(value, item){
        if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
          return '房间类型不能有特殊字符';
        }

        if(/^\d+$/.test(value)) return '房间类型不能全为数字';
        if (value.length < 2) return '房间类型长度不能小于2位';
      },
      // 数组写法。
      // 数组中两个成员值分别代表：[正则表达式、正则匹配不符时的提示文字]
      price: [/^\d+(,\d{3})*(\.\d{1,2})?$/, '请输入正确的价格']

    });

    //监听提交
    form.on('submit(saveBtn)', function (data) {
      data = data.field;
      // 发送请求
      fetch(ctx + '/roomType/edit',{
        headers: {
          'Content-Type': 'application/json'
        },
        method: 'POST',
        body: JSON.stringify(data)
      }).then(function (resp){
        return resp.json();
      }).then(function(json){
        if (json.code == 200){
          var index = layer.alert('修改信息成功', {
            title: '操作成功',
          }, function () {
            // 关闭弹出层
            layer.close(index);

            // 刷新父页面表格
            parent.layui.table.reload('currentTableId');

            var iframeIndex = parent.layer.getFrameIndex(window.name);
            parent.layer.close(iframeIndex);

          });
        } else {
          layer.msg(json.msg, {icon: 2, time: 1000});
        }
      }).catch(function (error) {
        layer.msg(error.msg, {icon: 2, time: 1000});
      });

      return false;
    });

  });
</script>
</body>
</html>